<template>
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="150px"
           size="medium" @submit.native.prevent>
    <div class="tab-container">
      <el-tabs v-model="tab_settingsActiveTab" type="border-card">
        <el-tab-pane name="tab1" label="基本设置">
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="网站名称" prop="siteName">
                <el-input v-model="formData.siteName" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="后端名称" prop="backendName">
                <el-input v-model="formData.backendName" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="网站域名" prop="siteDomain">
                <el-input v-model="formData.siteDomain" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="手机号正则" prop="phoneRegular">
                <el-input v-model="formData.phoneRegular" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="网站logo" prop="siteLogo">
                <el-upload :file-list="siteLogoFileList" :headers="siteLogoUploadHeaders"
                           :data="siteLogoUploadData" list-type="picture-card" show-file-list :limit="3"> <template
                  #default><i class="el-icon-plus"></i></template></el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="登录页图标" prop="loginPageIcon">
                <el-upload :file-list="loginPageIconFileList" :headers="loginPageIconUploadHeaders"
                           :data="loginPageIconUploadData" list-type="picture-card" show-file-list :limit="3">
                  <i class="el-icon-plus"></i></el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="币种" prop="currency">
                <el-input v-model="formData.currency" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="区号" prop="areaCode">
                <el-input v-model="formData.areaCode" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="邀请奖励" prop="InvitationRewards">
                <el-input v-model="formData.InvitationRewards" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="邀请注册限制" prop="InvitationRegistLimits">
                <el-input v-model="formData.InvitationRegistLimits" type="text"
                          placeholder="邀请码每日注册人数限制(0:不限制)" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="注册邀请码开关" prop="registInvitationSwitch">
                <el-switch v-model="formData.registInvitationSwitch"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="注册短信验证码开关" prop="registSmsVerifyCode">
                <el-switch v-model="formData.registSmsVerifyCode"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="风险账号自动审核开关" prop="riskAccountAutoVerifySwitch">
                <el-switch v-model="formData.riskAccountAutoVerifySwitch"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="任务自动审核开关" prop="taskAutoVerifySwitch">
                <el-switch v-model="formData.taskAutoVerifySwitch"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="安卓下载地址" prop="androidDoloadUrl">
                <el-input v-model="formData.androidDoloadUrl" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="苹果下载地址" prop="iosDoloadUrl">
                <el-input v-model="formData.iosDoloadUrl" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="客服链接" prop="customerServiceLink">
                <el-input v-model="formData.customerServiceLink" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="视频教程地址" prop="videoIntroductionUrl">
                <el-input v-model="formData.videoIntroductionUrl" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="电影播放时长" prop="moviePlayDuration">
                <el-input v-model="formData.moviePlayDuration" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="实习期有效期" prop="internshipDespireDate">
                <el-input v-model="formData.internshipDespireDate" type="text" placeholder="单位：天" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="同IP注册上限" prop="sameIpRegistLimits">
                <el-input v-model="formData.sameIpRegistLimits" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="绑卡数量上限" prop="bindCardLimits">
                <el-input v-model="formData.bindCardLimits" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="正式会员接收任务周次" prop="normalMemberReceiveTaskWeekly">
                <el-input v-model="formData.normalMemberReceiveTaskWeekly" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="是否开启主钱包" prop="mainWalletSwitch">
                <el-switch v-model="formData.mainWalletSwitch"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="是否开启谷歌码" prop="googleCodeSwitch">
                <el-switch v-model="formData.googleCodeSwitch"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="VIP额外奖励返还钱包" prop="vipExtraRewardsReturnWallet">
                <el-select v-model="formData.vipExtraRewardsReturnWallet" class="full-width-input" clearable>
                  <el-option v-for="(item, index) in vipExtraRewardsReturnWalletOptions" :key="index"
                             :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="YouTube令牌" prop="youtubeToken">
                <el-input v-model="formData.youtubeToken" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
            </el-col>
            <el-col :span="12" class="grid-cell">
            </el-col>
          </el-row>
          <div class="static-content-item" style="justify-content: center;">
            <el-button type="primary">提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-36390" label="充值设置">
          <el-row>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="快捷充值金额" prop="quickRechargeAmounts">
                <el-input v-model="formData.quickRechargeAmounts" type="text"
                          placeholder="如500,2000等等，用英文逗号分隔" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="充值说明" prop="rechargeDesc">
                <el-input type="textarea" v-model="formData.rechargeDesc" rows="3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item" style="justify-content: center;">
            <el-button type="primary">提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-99056" label="提现设置">
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="手续费类型" prop="serviceFeeType">
                <el-select v-model="formData.serviceFeeType" class="full-width-input" clearable>
                  <el-option v-for="(item, index) in serviceFeeTypeOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="手续费比例" prop="serviceFeeRatio">
                <el-input v-model="formData.serviceFeeRatio" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="提现限制金额" prop="withdrawLimits">
                <el-input v-model="formData.withdrawLimits" type="text" placeholder="如500,2000等等，用英文逗号分隔"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="每日提现次数" prop="dailyWithdrawTimes">
                <el-input v-model="formData.dailyWithdrawTimes" type="text" placeholder="-1表示不限制" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="最低提现金额" prop="minWithdrawLimits">
                <el-input v-model="formData.minWithdrawLimits" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="最高提现金额" prop="maxWithdrawLimits">
                <el-input v-model="formData.maxWithdrawLimits" type="text" placeholder="-1表示不限制" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="提现时间限制" prop="input108575">
                <el-input v-model="formData.input108575" type="text" placeholder="提现时间格式：9:00-17:30"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="主钱包提现开关" prop="mainWalletWithdrawSwitch">
                <el-switch v-model="formData.mainWalletWithdrawSwitch"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="可提现周次" prop="weeklyWithdraw">
                <el-input v-model="formData.weeklyWithdraw" type="text" placeholder="如周一、周二、周三、周四、周五"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="提现说明" prop="withdrawDesc">
                <el-input type="textarea" v-model="formData.withdrawDesc" rows="3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item" style="justify-content: center;">
            <el-button type="primary">提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-33102" label="信用设置">
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="初始信用" prop="initCredit">
                <el-input v-model="formData.initCredit" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="提现信用" prop="minWithdrawCredit">
                <el-input v-model="formData.minWithdrawCredit" type="text" placeholder="信用低于设定值禁止提现"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="任务减半信用" prop="taskHalfCredit">
                <el-input v-model="formData.taskHalfCredit" type="text" placeholder="任务低于设定值任务减半" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="封号信用" prop="bannedCredit">
                <el-input v-model="formData.bannedCredit" type="text" placeholder="信用低于设定值无法提现接任务" clearable>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item" style="justify-content: center;">
            <el-button type="primary">提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-89476" label="佣金设置">
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="一级佣金比例" prop="lv1CommissionRatio">
                <el-input v-model="formData.lv1CommissionRatio" type="text" placeholder="一级下属完成任务佣金比例"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="一级奖励比例" prop="lv1RewardRatio">
                <el-input v-model="formData.lv1RewardRatio" type="text" placeholder="一级下属购买VIP奖励比例" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="二级佣金比例" prop="lv2CommissionRatio">
                <el-input v-model="formData.lv2CommissionRatio" type="text" placeholder="二级下属完成任务佣金比例"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="二级奖励比例" prop="lv2RewardRatio">
                <el-input v-model="formData.lv2RewardRatio" type="text" placeholder="二级下属购买VIP奖励比例" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="三级佣金比例" prop="lv3CommissionRatio">
                <el-input v-model="formData.lv3CommissionRatio" type="text" placeholder="三级下属完成任务佣金比例"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="三级奖励比例" prop="lv3RewardRatio">
                <el-input v-model="formData.lv3RewardRatio" type="text" placeholder="三级下属购买VIP奖励比例" clearable>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item" style="justify-content: center;">
            <el-button type="primary">提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-19101" label="基金设置">
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="基金名称" prop="fundName">
                <el-input v-model="formData.fundName" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="邀请赠送次数" prop="inviteGiveTimes">
                <el-input v-model="formData.inviteGiveTimes" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="基金logo" prop="fundLogo">
                <el-upload :file-list="fundLogoFileList" :headers="fundLogoUploadHeaders"
                           :data="fundLogoUploadData" list-type="picture-card" show-file-list :limit="3"> <template
                  #default><i class="el-icon-plus"></i></template></el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="基金背景图片" prop="fundBackground">
                <el-upload :file-list="fundBackgroundFileList" :headers="fundBackgroundUploadHeaders"
                           :data="fundBackgroundUploadData" list-type="picture-card" show-file-list :limit="3">
                  <i class="el-icon-plus"></i></el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="基金说明" prop="fundDesc">
                <el-input type="textarea" v-model="formData.fundDesc" rows="3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="基金开关" prop="fundSwitch">
                <el-switch v-model="formData.fundSwitch"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item" style="justify-content: center;">
            <el-button type="primary">提交</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-74708" label="转盘设置">
          <el-row>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="转盘名称" prop="turntableName">
                <el-input v-model="formData.turntableName" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="转盘图标logo" prop="turntableLogo">
                <el-upload :file-list="turntableLogoFileList" :headers="turntableLogoUploadHeaders"
                           :data="turntableLogoUploadData" list-type="picture-card" show-file-list :limit="3">
                  <i class="el-icon-plus"></i></el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="转盘说明" prop="turntableDesc">
                <el-input type="textarea" v-model="formData.turntableDesc" rows="3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="转盘开关" prop="turntableSwitch">
                <el-switch v-model="formData.turntableSwitch"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item" style="justify-content: center;">
            <el-button type="primary">提交</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-form>

</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      formData: {
        siteName: "",
        backendName: "",
        siteDomain: "",
        phoneRegular: "",
        siteLogo: null,
        loginPageIcon: null,
        currency: "",
        areaCode: "",
        InvitationRewards: "",
        InvitationRegistLimits: "",
        registInvitationSwitch: true,
        registSmsVerifyCode: false,
        riskAccountAutoVerifySwitch: false,
        taskAutoVerifySwitch: true,
        androidDoloadUrl: "",
        iosDoloadUrl: "",
        customerServiceLink: "",
        videoIntroductionUrl: "",
        moviePlayDuration: "",
        internshipDespireDate: "",
        sameIpRegistLimits: "",
        bindCardLimits: "",
        normalMemberReceiveTaskWeekly: "",
        mainWalletSwitch: false,
        googleCodeSwitch: false,
        vipExtraRewardsReturnWallet: 2,
        youtubeToken: "",
        quickRechargeAmounts: "",
        rechargeDesc: "",
        serviceFeeType: 2,
        serviceFeeRatio: "",
        withdrawLimits: "",
        dailyWithdrawTimes: "",
        minWithdrawLimits: "",
        maxWithdrawLimits: "",
        input108575: "",
        mainWalletWithdrawSwitch: false,
        weeklyWithdraw: "",
        withdrawDesc: "",
        initCredit: "",
        minWithdrawCredit: "",
        taskHalfCredit: "",
        bannedCredit: "",
        lv1CommissionRatio: "",
        lv1RewardRatio: "",
        lv2CommissionRatio: "",
        lv2RewardRatio: "",
        lv3CommissionRatio: "",
        lv3RewardRatio: "",
        fundName: "",
        inviteGiveTimes: "",
        fundLogo: null,
        fundBackground: null,
        fundDesc: "",
        fundSwitch: false,
        turntableName: "",
        turntableLogo: null,
        turntableDesc: "",
        turntableSwitch: false,
      },
      rules: {
        InvitationRegistLimits: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        moviePlayDuration: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        internshipDespireDate: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        sameIpRegistLimits: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        bindCardLimits: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        serviceFeeRatio: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        dailyWithdrawTimes: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        minWithdrawLimits: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        initCredit: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        minWithdrawCredit: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        taskHalfCredit: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        bannedCredit: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        lv1CommissionRatio: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        lv1RewardRatio: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        lv2CommissionRatio: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        lv2RewardRatio: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        lv3CommissionRatio: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        lv3RewardRatio: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        inviteGiveTimes: [{
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
      },
      'tab_settingsActiveTab': 'tab1',
      vipExtraRewardsReturnWalletOptions: [{
        "label": "主钱包",
        "value": 1
      }, {
        "label": "收益钱包",
        "value": 2
      }],
      serviceFeeTypeOptions: [{
        "label": "固定金额",
        "value": 1
      }, {
        "label": "百分比",
        "value": 2
      }],
      siteLogoFileList: [],
      siteLogoUploadHeaders: {},
      siteLogoUploadData: {},
      loginPageIconFileList: [],
      loginPageIconUploadHeaders: {},
      loginPageIconUploadData: {},
      fundLogoFileList: [],
      fundLogoUploadHeaders: {},
      fundLogoUploadData: {},
      fundBackgroundFileList: [],
      fundBackgroundUploadHeaders: {},
      fundBackgroundUploadData: {},
      turntableLogoFileList: [],
      turntableLogoUploadHeaders: {},
      turntableLogoUploadData: {},
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    }
  }
}

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>
